<template>
	<div class="customer-dialog">
	  <el-dialog
	    :title="title"
		v-if="isAuth(['ROOT', 'ROLE:INSERT', 'ROLE:UPDATE'])"
		v-model="visible"
		custom-class="dialog"
	    width="52.5%"
	  >
	    <el-form
	      ref="form"
	      class="customer-form"
	      :model="form"
	      label-width="97px"
	      :inline="true"
	      :rules="dataRule"
	      label-suffix=":"
	    >
	      <el-form-item label="患者姓名" prop="patientName" class="form-style">
	        <el-input v-model.trim="form.patientName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="医生姓名" prop="doctorName" class="form-style">
	        <el-input v-model.trim="form.doctorName" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="诊断结果" prop="diagnosis" class="form-style">
	        <el-input v-model.trim="form.diagnosis" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	
	      <div v-for="(item, index) in form.dynamicItem" :key="index" style="height: 100px">
	        <el-form-item label="药名" class="form-style">
	          <el-input v-model="item.name" size="small" class="special-style" />
	        </el-form-item>
	        <el-form-item label="数量" class="form-style">
	          <el-input v-model="item.num" size="small" class="special-style" />
	        </el-form-item>
			<el-form-item label="用量" class="form-style">
			  <el-input v-model="item.spec" size="small" class="special-style" />
			</el-form-item>
			<el-form-item label="用法" class="form-style">
			  <el-input v-model="item.method" size="small" class="special-style" />
			</el-form-item>
	        <el-form-item>
	          <el-button v-if="index+1 == form.dynamicItem.length" type="primary" size="mini" @click="addItem(form.dynamicItem.length)">+</el-button>
	          <el-button v-if="index !== 0" type="danger" size="mini" @click="deleteItem(item, index)">-</el-button>
	        </el-form-item>
	      </div>
	    </el-form>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="visible = false">取消</el-button>
	      <el-button type="primary" @click="dataFormSubmit">确定</el-button>
	    </div>
	  </el-dialog>
	</div>

</template>

<script>
export default {
	data: function() {
		return {
			visible: false,
			
            form: {
				id: null,
				patientName: '',
				doctorName: '',
				diagnosis: '',
				patientCardId: '',
				subDeptId: '',
				doctorId: '',
				registrationId: '',
                dynamicItem: [
                //默认显示一条
                  {
                    name: '',
                    num: '',
                    spec: '',
					method: ''
                  }
                ]
            },
            dataRule: {
                patientName: [
                    { required: true, message: '患者姓名不能为空' },
                    {
                        pattern: '^[\\u4e00-\\u9fa5]{2,20}$',
                        message: '姓名格式错误'
                    }
                ],
                doctorName: [
                   { required: true, message: '医生姓名不能为空' },
                   {
                       pattern: '^[\\u4e00-\\u9fa5]{2,20}$',
                       message: '姓名格式错误'
                   }
                ],
                diagnosis: [
                    {
                        required: true,
                        message: '诊断结果不能为空'
                    }
                ],
            }
        };
	},

	methods: {
		addItem(length) {
		      if (length >= 10) {
		        this.$message({
		          type: 'warning',
		          message: '最多可新增10条!'
		        })
		      } else {
		        this.form.dynamicItem.push({
		          name: '',
		          num: '',
		          spec: '',
		          method: ''
		        })
		      }
		    },
		    //删除方法
		    deleteItem(item, index) {
		      this.form.dynamicItem.splice(index, 1)
		    },
		reset: function() {
		    let form = {
		        id: null,
		        patientName: null,
		        doctorName: null,
		        diagnosis: null,
				patientCardId: null,
				subDeptId: null,
				doctorId: null,
				registrationId: null,
				dynamicItem: [
                //默认显示一条
                  {
                    name: null,
                    num: null,
                    spec: null,
					method: null
                  }
                ]
		    };
		    this.form = form;
		},
		init: function(id) {
		    let that = this;
		    //重置表单控件
		    that.reset();
		    //如果id是undefined，就对模型层id变量赋值为0
		    that.form.id = id || 0;
		    //显示对话框
		    that.visible = true;
		    		  
		    //DOM渲染操作要放在$nextTick函数中执行，例如加载数据
		    that.$nextTick(() => {
		        //清理前端验证结果
		        that.$refs['form'].resetFields();
		      
		        //下方是新添加的内容
		        if (that.form.id) {
		            that.$http('/prescription/searchPrescriptionById', 'POST', { id: id }, true, function(resp) {
		                that.form.patientName = resp.patientName;
		                that.form.doctorName = resp.doctorName;
						that.form.patientCardId = resp.patientCardId;
						that.form.subDeptId = resp.subDeptId;
						that.form.doctorId = resp.doctorId;
		            });
		        }
		    });
		},
		dataFormSubmit: function() {
		    let that = this;
		    //前端表单验证
		    that.$refs['form'].validate(function(valid) {
		        if (valid) {
		            let data = {
		                id: that.form.id,
		                patientName: that.form.patientName,
		                doctorName: that.form.doctorName,
		                diagnosis: that.form.diagnosis,
		                patientCardId: that.form.patientCardId,
						subDeptId: that.form.subDeptId,
						doctorId: that.form.doctorId,
						registrationId: that.form.registrationId,
						
		            };
		            that.$http('/prescription/insert', 'POST', data, true, function(
		                resp
		            ) {
		                ElMessage({
		                    message: '操作成功',
		                    type: 'success'
		                });
		                that.visible = false;
		                that.$emit('refreshDataList');
		            });
		        }
		    });
		},
	}
};
</script>

<style lang="scss">
  .customer-dialog{
    .customer-form{
      height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .address{
        .el-form-item__content{
          width: 89%;
        }
        .el-input__inner{
          width: 100%;
        }
    }
    .form-style{
      margin-bottom: 30px;
      .input-style{
        width: 215px;
      }
      .special-style{
        width: 194px;
      }
    }
    /**滚动条的宽度*/
    ::-webkit-scrollbar {
      width: 8px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }
  }
</style>

